<template>
  <div class="note-panel">
    <!-- 购买课程才能记笔记 -->
    <div
      class="note-input"
      v-if="getCurrentPlayItem.is_buy == 1 && getCurrentPlayItem.course_type != 2"
    >
      <el-input
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 5 }"
        :minlength="1"
        :maxlength="200"
        :showWordLimit="true"
        placeholder="输入笔记内容"
        v-model="noteContent"
      ></el-input>
      <el-row type="flex" align="middle" justify="space-between">
        <el-checkbox label="公开" v-model="publicity"></el-checkbox>
        <el-button type="primary" @click="addNote" size="mini" plain>保存</el-button>
      </el-row>
    </div>
    <div class="note-wrap">
      <el-row type="flex" align="middle" justify="space-between" class="panel-head">
        <span class="title">
          <i class="edu-icon-bijiben-xuanzhong edu-icon--left"></i>
          笔记
        </span>
        <el-checkbox
          v-if="getCurrentPlayItem.course_type != 2"
          label="只看我的"
          v-model="myNoteChecked"
          @change="handleCheckAllChange"
        ></el-checkbox>
      </el-row>
      <template v-if="noteList.length > 0">
        <el-scrollbar class="panel-list">
          <div class="item" v-for="(item, index) in noteList" :key="index">
            <div class="text">
              {{ item.content }}
              <i
                class="edu-icon-bianji edu-icon--right"
                v-if="$store.getters['user/accountInfo'].id == item.user_id"
                @click="handieModifyNote(item.id, item.content)"
              ></i>
            </div>
            <el-row class="info" type="flex" align="middle" justify="space-between">
              <el-row type="flex" align="middle">
                <edu-avatar
                  shape="circle"
                  :size="20"
                  :src="item.user.avatar_url"
                  @click="goUser(item.user.id)"
                ></edu-avatar>
                <span class="name" @click="goUser(item.user.id)">{{ item.user.nick_name }}</span>
              </el-row>
              <span class="time">{{ item.create_time | parseTime('{y}-{m}-{d}') }}</span>
            </el-row>
          </div>
        </el-scrollbar>
      </template>
      <edu-no-data :image="false" text="暂时没有笔记哦~" v-else></edu-no-data>
    </div>
  </div>
</template>

<script>
import EduNoData from '@/components/EduNoData'
import { mapState } from 'vuex'
export default {
  props: {
    detailInfo: Object
  },
  components: {
    EduNoData
  },
  data() {
    return {
      noteActive: true,
      publicity: true,
      amendId: '',
      noteContent: '',
      myNoteChecked: false,
      noteList: []
    }
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: state => state.course.currentPlayItem
    })
  },
  mounted() {
    this.getCourseNoteListInfo('all')
  },
  watch: {
    'getCurrentPlayItem.id': {
      handler(n, o) {
        if (n != o) {
          this.getCourseNoteListInfo('all')
          this.myNoteChecked = false
        }
      },
      deep: true
    }
  },
  methods: {
    // 我的笔记
    handleCheckAllChange() {
      if (this.myNoteChecked) {
        this.getCourseNoteListInfo('my')
      } else {
        this.getCourseNoteListInfo('all')
      }
    },
    // 所有笔记
    getCourseNoteListInfo(val) {
      this.$api.getCourseNoteList(
        {
          section_id: this.getCurrentPlayItem.id,
          type: val,
          page: 1,
          count: 10
        },
        res => {
          let data = res.data
          this.noteList = data.data
        }
      )
    },
    // 添加笔记
    setCourseAddNote(con, open) {
      this.$api.createCourseNote(
        {
          section_id: this.getCurrentPlayItem.id,
          course_id: this.getCurrentPlayItem.course_id,
          course_type: this.detailInfo.course_type,
          open_status: open,
          content: con.trim()
        },
        res => {
          this.$message.success(res.msg)
          this.getCourseNoteListInfo('all')
        },
        error => {
          this.$message.error(error.msg)
        }
      )
    },
    // 修改笔记
    handleModifyNote(id, con, open) {
      this.$api.updateCourseModifyNote(
        id,
        { content: con.trim(), open_status: open },
        res => {
          this.$message.success(res.msg)
          this.getCourseNoteListInfo('all')
        },
        error => {
          this.$message.error(error.msg)
        }
      )
    },
    // 添加/修改
    addNote() {
      let open = 1
      // 公开/私密
      if (this.publicity) {
        open = 1
      } else {
        open = 0
      }
      if (this.noteActive) {
        this.setCourseAddNote(this.noteContent, open)
      } else {
        this.handleModifyNote(this.amendId, this.noteContent, open)
        this.amendId = ''
        this.noteActive = true
      }
      this.noteContent = ''
      this.publicity = true
      this.myNoteChecked = false
    },

    // 如果修改笔记添加id
    handieModifyNote(id, con) {
      this.noteActive = false
      this.amendId = id
      this.noteContent = con
    },
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 笔记
.note-panel {
  height: calc(486px - 39px);
  .load-more {
    color: #fff;
  }
  .note-input {
    padding: 22px 18px 14px;
    ::v-deep .el-textarea {
      margin-bottom: 10px;
    }
    ::v-deep .el-checkbox {
      .el-checkbox__label {
        color: #dcdfe6;
      }
      .el-checkbox__inner {
        background-color: transparent;
      }
    }
    ::v-deep .el-button {
      color: $text-color-import;
      background-color: #dcdfe6;
    }
  }
  .note-wrap {
    border-top: 1px solid $text-color-secondary;
    .panel-head {
      height: 50px;
      padding: 0 18px;
      .title {
        color: #dcdfe6;
        font-size: 14px;
      }
      ::v-deep .el-checkbox {
        .el-checkbox__label {
          color: #dcdfe6;
        }
        .el-checkbox__inner {
          background-color: transparent;
        }
      }
    }
    .panel-list {
      height: 196px;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      .item {
        color: #dcdfe6;
        padding: 10px 18px;
        position: relative;
        &::before {
          content: '';
          height: 1px;
          width: calc(100% - 36px);
          background-color: $text-color-secondary;
          position: absolute;
          left: 18px;
          bottom: 0;
        }
        .text {
          font-size: 13px;
          font-weight: 400;
          line-height: 20px;
          word-wrap: break-word;
          .edu-icon-bianji {
            @include edu-color-auxiliary;
            font-size: 14px;
            cursor: pointer;
          }
        }
        .info {
          margin-top: 12px;
          span {
            font-size: 12px;
          }
          .name {
            margin-left: 5px;
            cursor: pointer;
          }
          .time {
            color: #b7bac1;
          }
        }
      }
    }
  }
}
</style>
